<template>
  <div>
    <el-button class="mb10" type="primary" @click="handleAdd">新增</el-button>
    <el-table :data="state.tableData" border style="width: 100%">
      <el-table-column prop="articleId" label="ID" width="50px" />
      <el-table-column label="logo" width="86px">
        <template #default="scope">
          <el-image class="table-img" :src="scope.row.articlePhoto" fit="fill" />
        </template>
      </el-table-column>
      <el-table-column prop="articleTitle" label="文章标题" />
      <el-table-column prop="articleUrl" label="文章路径" />
      <el-table-column label="文章发布时间">
        <template #default="scope">
          {{ formatDate(new Date(scope.row.articleDate), 'YYYY-mm-dd') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="350">
        <template #default="scope">
          <el-button @click="handelToTop(scope.row.articleId)">置顶</el-button>
          <el-button @click="handelCancelTop(scope.row.articleId)">取消置顶</el-button>
          <el-button @click="handelEdit(scope.row)">编辑</el-button>
          <el-button @click="handleDelete(scope.row.articleId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="state.total" :limit="state.pageSize" :page-change="PageChange" />

    <OperateDialog ref="dialogRef" :type="isType" :params="param" @submitChange="getTableData" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatDate } from '@/utils/formatTime'
import OperateDialog from './Component/operateDialog.vue'
import Pagination from '@/components/pagination/index.vue'
import { postNewList, postDeleteNew, uptopArticle, topArticle } from "@/api/base"
import { TypeEnum } from '../enum'

const state = reactive({
  tableData: [],
  total: 0,
  pageNum: 1,
  pageSize: 10
})
const dialogRef = ref()
const param = ref()
const isType = ref("add")

const getTableData = () => {
  postNewList({
    pageNum: state.pageNum,
    pageSize: state.pageSize,
    extraParamMap: {
      articleTypeList: [TypeEnum.News]
    }
  }).then(res => {
    state.tableData = res.data.rows || []
    state.total = res.data.total || 0
  })
}
getTableData()

const handelToTop = async (articleId: number) => {
  try {
    await topArticle({ articleId })
    ElMessage({
      type: 'success',
      message: '置顶成功',
    })
    getTableData()
  } catch {
    ElMessage({
      type: 'warning',
      message: '置顶失败',
    })
  }
}

const handelCancelTop = async (articleId: number) => {
  try {
    await uptopArticle({ articleId })
    ElMessage({
      type: 'success',
      message: '取消置顶成功',
    })
    getTableData()
  } catch {
    ElMessage({
      type: 'warning',
      message: '取消置顶失败',
    })
  }
}

// 分页
const PageChange = (page: number) => {
  state.pageNum = page;
  getTableData()
}
// 新增
const handleAdd = () => {
  isType.value = "add"
  dialogRef.value.dialogVisible = true
}
// 编辑
const handelEdit = (params: any) => {
  param.value = { ...params }
  isType.value = "edit"
  dialogRef.value.dialogVisible = true
}
// 删除
const handleDelete = (id: number) => {
  ElMessageBox.confirm(
    '确定删除该选项?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      postDeleteNew(id).then(res => {
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: res.msg,
          })
          getTableData()
        }
      })
    })
}
</script>

<style lang="scss" scoped>
.table-img {
  width: 60px;
  height: 60px;
}

.el-form .el-form-item:last-of-type {
  margin-bottom: 18px !important;
}
</style>